<template>

  <div>
    <div class="load" v-if="loading">loading...</div>
    <locationHeader :cities="cities" ></locationHeader>
    <locationList
     :letter="letter"
     :cities="cities"
     :hotCities="hotCities"></locationList>
    <locationAlphabet
    @change="handleLetterChange"
    :alphabetList="alphabetList"></locationAlphabet>
  </div>

</template>

<script>
  import axios from 'axios'
  import locationHeader from './components/locationHeader'
  import locationList from './components/locationList'
  import locationAlphabet from './components/locationAlphabet'
  export default {
    name: 'Location',
    components:{
      locationHeader,
      locationList,
      locationAlphabet
    },
    data(){
        return {
          letter:'',
          cities:{},
          hotCities:[],
          alphabetList:[],
          loading:true
        }
      },
    methods:{
        handleLetterChange(letter){
          this.letter = letter
        },
        getLocationData(){
          axios.get("/api/city.json")
              .then(this.getHomeDataSucc)
        },
        getHomeDataSucc(res){
          res = res.data
          // console.log(res)
          if(res.data){
            this.loading =false
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
            this.alphabetList = data.alphabetList
          }
        }
      },
    mounted(){
          this.getLocationData()
        }
  }
</script>

<style lang="stylus" scoped>
.load
  position:absolute
  top:7rem
  left:3.5rem
  z-index:1011
  width:1.8rem
  height:.5rem
  opacity:.3
  background:#000
  color:#fff
  text-align:center

</style>
